<template>
  <div class="container">
    <h1 class="title">假定这是一个跳转页面</h1>
    <div class="digital-human">
      <!-- 视频元素 -->
      <video ref="videoElement" src="../assets/video/1717658488515_3480.webm" muted preload="auto" playsinline
             @loadeddata="handleVideoLoadedData" @ended="handleVideoEnded"></video>
      <!-- 输入框和提交按钮 -->
      <audio ref="audioElement" controls></audio>
      <div class="input-section">
        <input v-model="userInput" type="text" placeholder="请输入内容" class="input-box"/>
        <div class="button-group">
          <button @click="handleSubmit" class="submit-button" :disabled="isSubmitting">提交</button>
          <button @click="backToHome" class="submit-button">首页</button>
        </div>
      </div>
      <div v-show="isLinkVisible" class="link-section">
        <a :href="linkUrl" class="link" target="_blank" rel="noopener noreferrer">{{ linkUrl }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue';
import axios from "axios";
import {useRoute, useRouter} from "vue-router";

export default {
  setup() {
    const route = useRoute(); // 获取当前路由
    const router = useRouter();

    const videoElement = ref(null);
    const userInput = ref('');
    const audioElement = ref(null); // 音频元素的引用
    const linkUrl = ref(null); // 获取链接参数

    let isPlaying = ref(false);
    let isSubmitting = ref(false);
    const errorMessage = ref(''); // 用于显示错误提示的状态
    const isLinkVisible = ref(false);


    const handleVideoLoadedData = () => {

    };

    const backToHome = () => {
      router.push({
        name: 'VideoHuman'
      });
    }

    // 处理音频播放完毕的逻辑
    const handleAudioEnded = () => {
      if (videoElement.value) {
        videoElement.value.pause(); // 停止视频播放
        videoElement.value.currentTime = 0; // 重置视频回到开始
      }
    };

    const handleSubmit = async () => {
      if (userInput.value) {
        try {
          // 设置提交状态为 true，清空之前的错误信息
          isSubmitting.value = true;
          errorMessage.value = '';

          console.log('用户输入的内容:', userInput.value);

          // 发送用户输入到服务器
          const response = await axios.post('https://test-wd-api.iwanshang.cloud/kma/gpt/atxb/aizhan/t1', {
            prompt: userInput.value // 将用户输入的数据发送到服务器
          });

          // 处理服务器响应
          console.log('服务器返回的数据:', response.data);
          if (response.data.code === 200) {
            const message = response.data.data;
            await testToAudio(message);
          } else {
            console.error('服务器返回了非 200 的状态码:', response.data.code);
          }
        } catch (error) {
          // 捕获并处理错误
          console.error('请求出错:', error);
          errorMessage.value = '请求失败，请稍后重试。';
        } finally {
          // 重置用户输入与提交状态
          userInput.value = '';
          isSubmitting.value = false;
        }
      }
    };


    const testToAudio = async (message) => {
      // 将文本翻译为语音
      const audioResponse = await axios.post('https://test-wd-api.iwanshang.cloud/kma/gpt/audio/text2Audio', {
        text: message // 将翻译后的文本发送到服务器
      });

      console.log('语音数据:', audioResponse.data);
      if (audioResponse.data.code === 200 && audioResponse.data.audio) {
        const base64Audio = audioResponse.data.audio; // 修正为从 audioResponse 中获取 audio 数据

        // 设置音频元素的 src 属性并播放
        audioElement.value.src = `data:audio/wav;base64,${base64Audio}`;
        audioElement.value.play();

        // 播放视频并静音
        if (videoElement.value) {
          isPlaying.value = true;
          videoElement.value.muted = true; // 静音
          videoElement.value.loop = true; // 循环播放
          videoElement.value.play(); // 播放视频
        } else {
          console.error('视频元素未找到');
        }
      } else {
        console.error('未能获取到有效的音频数据');
      }
    }


    const handleVideoEnded = () => {
      isPlaying.value = false;
    };


    const togglePlay = () => {
      if (videoElement.value.paused || videoElement.value.ended) {
        videoElement.value.loop = true;
        videoElement.value.play();
        isPlaying.value = true;
      } else {
        videoElement.value.pause();
        isPlaying.value = false;
      }
    };

    onMounted(async () => {
      // 确保音频元素存在后添加事件监听器
      if (audioElement.value) {
        audioElement.value.addEventListener('ended', handleAudioEnded);
      }
      console.log('路由参数:', route.query);
      if (route.query) {
        if (route.query.url) {
          isLinkVisible.value = true;
          linkUrl.value = route.query.url;
        }
        if (route.query.message) {
          userInput.value = '';
          isSubmitting.value = true;
          await testToAudio(route.query.message);
          isSubmitting.value = false;
        }
      }
    });

    return {
      videoElement,
      audioElement,
      togglePlay,
      isPlaying,
      isSubmitting,
      errorMessage,
      handleVideoEnded,
      handleVideoLoadedData,
      handleSubmit,
      userInput,
      linkUrl,
      isLinkVisible,
      backToHome
    };
  },
};
</script>
<style scoped>
.container {
  text-align: center;
  padding: 20px;
}

audio {
  display: none;
}

.digital-human {
  position: relative;
  width: 90vw; /* 使用相对宽度以适应各种设备 */
  max-width: 360px; /* 最大宽度，防止过大 */
  height: 60vh; /* 高度相对视口的高度 */
  max-height: 640px; /* 最大高度，防止过大 */
  background: transparent; /* 保持透明背景 */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

canvas {
  //display: block;
  //margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 保持视频背景透明 */
}

.play-pause-button {
  position: absolute;
  top: 10px; /* 距离容器顶部的距离 */
  left: 10px; /* 距离容器左侧的距离 */
  padding: 10px 20px; /* 内边距 */
  background-color: #007bff; /* 背景颜色 */
  color: white; /* 文本颜色 */
  border: none; /* 去除边框 */
  border-radius: 5px; /* 边框圆角 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  outline: none; /* 去除点击时的轮廓 */
}

.mute-button {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url('https://sjzz.ilhjy.cn/uimg/202405/14/1715651036930_3480.png');
  background-size: cover;
  background-position: center;
  cursor: pointer;
  animation: pulse 2s infinite; /* 添加脉冲动画 */
}

.play-pause-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.error-message {
  margin-left: 10px;
  color: red; /* 错误消息的颜色 */
  font-size: 14px; /* 字体大小 */
}

.input-section {
  display: flex;
  flex-direction: column; /* 按钮在输入框下方 */
  align-items: center; /* 水平居中 */
  margin: 20px; /* 给输入框和按钮加点间距 */
}


.input-box {
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.button-group {
  display: flex; /* 使用 Flexbox 布局 */
  gap: 20px; /* 按钮之间的间距，调整为20px */
}

.submit-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}

.link-section {
  margin-top: 20px;
}

.link {
  color: #3498db; /* 链接颜色 */
  font-size: 1.2rem;
  text-decoration: none; /* 移除下划线 */
  font-weight: bold;
}

.link:hover {
  color: #2980b9; /* 鼠标悬停时的颜色变化 */
  text-decoration: underline; /* 悬停时增加下划线 */
}
</style>